<template>
  <a-modal
    width="900px"
    :bodyStyle="{ height: '550', overflow: 'auto' }"
    :visible="modalVisible"
    @cancel="handleCancel"
    :title="labelTitle"
  >
    <a-form-model ref="caseHandleStop" :rules="rules" :model="infoForm">
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="案由" prop="cause" >
        <a-textarea
          v-model="infoForm.cause"
          allow-clear
          :maxLength="3000"
          :auto-size="{ minRows: 3, maxRows: 5 }"
          placeholder="请输入案由"
        />
      </a-form-model-item>

      <a-form-model-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="决定日期"
        prop="decisiondate"
      >
        <a-date-picker
          v-model="infoForm.decisiondate"
          placeholder="请选择决定日期"
          format="YYYY-MM-DD"
          :allowClear="true"
        />
      </a-form-model-item>

      <a-form-model-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="停止执行原因"
        prop="reason"
        
      >
        <a-textarea
          v-model="infoForm.reason"
          allow-clear
          :maxLength="3000"
          :auto-size="{ minRows: 3, maxRows: 5 }"
          placeholder="请输入停止执行原因"
        />
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="申请意见" prop="describe" >
        <a-textarea
          v-model="infoForm.describe"
          allow-clear
          :maxLength="3000"
          :auto-size="{ minRows: 3, maxRows: 5 }"
          placeholder="请输入申请意见"
        />
      </a-form-model-item>
    </a-form-model>

    <template slot="footer">
      <div style="display: flex; justify-content: center">
        <a-button style="margin-right: 20px" @click="handleCancel"> 取消 </a-button>
        <a-button type="primary" icon="save" @click="onSubmit" :loading="loading"> 提交 </a-button>
      </div>
    </template>
  </a-modal>
</template>
<script>
import { Tp_proctypeEnum } from '@/enumeration/Tp_proctype'
import { startBusinessProced } from '@/api/accept/business_Approve'
import {CaseHandleMixin} from  '@/views/handleCase/CaseHandleMixin'
export default {
  mixins: [CaseHandleMixin],
  data() {
    return {
      infoForm: {
        applyid: '', // applyid
        proctype: '', // 操作分类
        userid: '',
        username: '',
        processinstanceid: '',
        cause: '', // 案由
        describe: '', // 行政复议申请
        decisiondate: undefined, // 决定日期
        reason: '', // 停止执行原因
      },
      rules: {
        cause: [
          { required: true, message: '请输入案由', trigger: 'blur' },
          { max: 3000, message: '长度不能超过3000', trigger: 'blur' },
        ],
        describe: [
          { required: true, message: '请输入申请意见', trigger: 'blur' },
          { max: 3000, message: '长度不能超过3000', trigger: 'blur' },
        ],
        reason: [
          { required: true, message: '请输入停止执行原因', trigger: 'blur' },
          { max: 3000, message: '长度不能超过3000', trigger: 'blur' },
        ],
        decisiondate: [{ required: true, message: '请选择决定日期', trigger: 'change' }],
      }
    }
  },
  created() {},
  methods: {
    init() {
      this.modalVisible = true
      this.labelTitle = '停止执行申请'
      this.resetForm()
      this.infoForm.cause = this.reason;
    },
    handleCancel() {
      this.resetForm()
      this.modalVisible = false
    },
    resetForm() {
      this.$nextTick(() => {
        this.$refs.caseHandleStop.resetFields()
      })
    },

    /**
     * 提交表单
     */
    onSubmit() {
      this.$refs.caseHandleStop.validate((valid) => {
        this.loading = true
        if (valid) {
          console.log('submit!', this.infoForm)
          let params = {
            applyid: this.applyid, // applyid
            proctype: this.proctype, // 操作分类
            userid: this.currentUser.userId,
            username: this.currentUser.fullname,
            processinstanceid: this.processinstanceid, // 流程实例id
            cause: this.infoForm.cause, // 案由
            describe: this.infoForm.describe, // 行政复议申请
          }
          let decisiondate = this.infoForm.decisiondate.format('YYYY年MM月DD日');
          let docfield = {
            reason: this.infoForm.reason, // 当事人
            decisiondate: decisiondate, // 听证时间
          }
          console.log('入参参数：' + params)
          startBusinessProced(params, docfield).then((res) => {
            if (res.code !== 0) {
              this.$message.error('操作失败')
            } else {
              this.$message.success('操作成功')
              this.$emit('reload')
              this.$emit('close')
              this.modalVisible = false
              this.autoToSonRouter(res.data)
            }
            this.loading = false
          })
        } else {
          this.loading = false
          // 加延时器的目的是为了vue实例更新未完成，我们可能获取DOM失败的问题
          // 利用原生js的方式，获取所有失败的类名，获得一个数组，取第一个元素获取焦点
          setTimeout(() => {
            const isError = document.getElementsByClassName('has-error')
            const input = isError[0].querySelector('input')
            //console.log(input)
            if (input !== null && input !== 'undefind' && input !== '') {
              isError[0].querySelector('input').focus()
                ? isError[0].querySelector('input').focus()
                : isError[0].querySelector('input').click()
            } else {
              isError[0].querySelector('textarea').focus()
            }
          }, 10)
          return false
        }
      })
    },
  },
}
</script>
      
<style lang="scss" scoped></style>
          